<!-- 标签选择 -->
<template>
	<div>
		<el-dialog :title="state.title" v-model="state.isShowDialog"  center class="borderRadius10" width="590">
			<div class="cropper-warp">
                <el-checkbox-group v-if="state.type == 'promiseList'" v-model="state.formData.selectList">
                    <el-checkbox v-for="(item,index) in state.formData.tagData" :key="index"  :label="item.promiseId">
						{{ item.promiseName }}
					</el-checkbox>
                </el-checkbox-group>
				<el-checkbox-group v-else v-model="state.formData.selectList">
                    <el-checkbox v-for="(item,index) in state.formData.tagData" :key="index"  :label="item.dictValue">{{ item.dictName }}</el-checkbox>
                </el-checkbox-group>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" >取 消</el-button>
					<el-button type="primary" @click="onSubmit"   >确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { promiseList } from "/@/api/commodity";
import { configData } from "/@/api/common";
const emit = defineEmits(['selectTagFun'])
// 定义变量内容
const state = reactive({
    loading: false,
	isShowDialog: false,
	useIndex: 0,
    title:'',
	type:'',
    formData:{
        tagData:[]as Array<any>,
        selectList:[],
    }
});

// 打开弹窗
const openDialog = async ( type: string, data?: any) => {
	console.log(type);
	console.log(data)
    let params = {
		dictType: ''// 数组传空默认全部
	};
    const { results } = await configData(params);

	
	
    state.type = type;
	state.formData.tagData = [];
    if(type == 'borwseMember' || type == 'buyMember'){
        state.title = '会员标签选择'
        state.formData.tagData = results.membershipLevel;
		state.formData.selectList = data.map((obj:any) => obj.dictValue)
    }else if( type == 'borwsePaidMember' || type == 'buyPaidMember'){
        state.title = '付费会员标签选择'
        state.formData.tagData = results.paidMembershipLevel;
		state.formData.selectList = data.map((obj:any) => obj.dictValue)
    }else if( type == 'borwseLaber'|| type == 'buyLaber'){
        state.title = '标签组选择'
        state.formData.tagData = results.tagGroup;
		state.formData.selectList = data.map((obj:any) => obj.dictValue)
    }else if(type == 'promiseList'){
		// 服务承诺选择
		state.title = '服务承诺选择'
		const { results } = await promiseList({size:100,current:1});
		state.formData.tagData = results.records;
	}
	state.isShowDialog = true;
};


// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

const onSubmit = () =>{
    let selectData = [] as Array<any>
	if(state.type == 'promiseList'){
		state.formData.selectList.map(item =>{
			let itemx = state.formData.tagData.filter(obj => obj.promiseId == item); 
			console.log(itemx)
			selectData.push({
				promiseId: itemx[0].promiseId,
				promiseName: itemx[0].promiseName
			})
		})
	}else{
		state.formData.selectList.map(item =>{
			let itemx = state.formData.tagData.filter(obj => obj.dictValue == item); 
			selectData.push({
				dictName: itemx[0].dictName,
				dictValue: itemx[0].dictValue
			})
		})
	}
	emit('selectTagFun', state.type,selectData);
	closeDialog();
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.cropper-warp {
	.cropper-warp-left {
		position: relative;
		display: inline-block;
		height: 350px;
		flex: 1;
		border: 1px solid var(--el-border-color);
		background: var(--el-color-white);
		overflow: hidden;
		background-repeat: no-repeat;
		cursor: move;
		border-radius: var(--el-border-radius-base);
		.cropper-warp-left-img {
			width: 100%;
			height: 100%;
		}
	}
	.cropper-warp-right {
		width: 150px;
		height: 350px;
		.cropper-warp-right-title {
			text-align: center;
			height: 20px;
			line-height: 20px;
		}
		.cropper-warp-right-item {
			margin: 15px 0;
			.cropper-warp-right-value {
				display: flex;
				.cropper-warp-right-value-img {
					width: 100px;
					height: 100px;
					border-radius: var(--el-border-radius-circle);
					margin: auto;
				}
				.cropper-size {
					width: 50px;
					height: 50px;
				}
			}
			.cropper-warp-right-label {
				text-align: center;
				font-size: 12px;
				color: var(--el-text-color-primary);
				height: 30px;
				line-height: 30px;
			}
		}
	}
}
</style>
